<template>
  <div>
    <div class="header">
      <router-link to="/"><i class="iconfont icon-fanhui"></i></router-link>
      发布订单详情
    </div>
    <van-form @submit="onSubmit" autocomplete="off">
      <van-cell-group @click="showPopup">
        <van-field
          label="选择游戏"
          name="game"
          v-model="checkgame"
          readonly
          placeholder="请选择游戏"
        />
      </van-cell-group>
      <van-dialog
        v-model="show"
        title=""
        show-cancel-button
        @confirm="confirm1"
        @cancel="cancel"
      >
        <h1>游戏</h1>
        <van-picker
          confirm-button-text=" "
          cancel-button-text=" "
          :columns="gamelist"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dialog>
      <van-cell-group @click="showPopup2">
        <van-field
          label="游戏区服"
          name="area"
          v-model="checkarea"
          readonly
          placeholder="请选择区服"
        />
      </van-cell-group>
      <van-dialog
        v-model="show2"
        title=""
        show-cancel-button
        @confirm="confirm2"
        @cancel="cancel"
      >
        <h1><span>游戏区</span><span>游戏服</span></h1>
        <van-picker
          title=""
          :columns="system"
          confirm-button-text=""
          cancel-button-text=""
          :default-index="0"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dialog>
      <van-cell-group>
        <van-field
          v-model="title"
          name="title"
          label="订单标题"
          placeholder="请输入订单标题"
        />
      </van-cell-group>
      <h2>价格时限</h2>
      <van-cell-group>
        <van-field
          v-model="price"
          name="price"
          label="订单价格"
          placeholder="请输入订单价格/元"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="time"
          name="time"
          label="时间要求"
          placeholder="请输入代练时间/小时"
        />
      </van-cell-group>
      <h2>账户信息</h2>
      <van-cell-group>
        <van-field
          v-model="number"
          label="游戏账号"
          name="number"
          placeholder="请输入游戏账号"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="gamepsd"
          name="gamepsd"
          label="游戏密码"
          placeholder="请输入游戏密码"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="gamename"
          name="gamename"
          label="游戏角色名"
          placeholder="请输入游戏角色名"
        />
      </van-cell-group>
      <h2>联系方式</h2>
      <van-field
        v-model="phone"
        name="phone"
        label="联系电话"
        placeholder="联系电话"
        :rules="[{ required: true, message: '请输入联系电话' }]"
      />
      <van-field
        v-model="QQ"
        name="QQ"
        label="联系QQ"
        placeholder="联系QQ"
        :rules="[{ required: true, message: '请输入联系QQ' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <div class="guide">
      <div class="content">
        <h6>发单指南</h6>
        <p>
          1.接单者半小时内上传好友排行段位首图，2小时内必须开始代练，每隔12小时上传好友排行段位进度图。
          2. 提交完成前上传好友排行段位图完单图（好友排行只针对排位单
          ，特殊类型订单请上传代练所需截图）。 3.
          未经发布者同意不能动用账号内金币、点券、体验卡等物品。 4.
          除登陆验证外，不能联系号主及号主好友加钱或补款，否则发布者有权终止订单并申请赔偿。
          5. 接单后中途退单，需要赔偿相应的保证金。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { Toast } from "vant";
import axios from "axios";
import { postorder } from "../api/postOrder";
export default {
  components: {},
  data() {
    return {
      title: 0,
      show: false,
      show2: false,
      checkgame0: "",
      checkgame: "",
      checkarea0: "",
      checkarea: "安卓区 默认服",
      game: "123",
      phone: "13452588124",
      QQ: "1245967575",
      title: "高级代练，带你飞",
      price: "99元",
      time: "3天",
      number: "123",
      gamepsd: "123",
      gamename: "加点猫粮",
    };
  },
  computed: {
    ...mapState({
      system: (state) => state.postOrder.system,
      userInfo: (state) => state.user.userInfo,
      gamelist: (state) => state.postOrder.gamelist,
      getgamename: (state) => state.moregame.getgamename,
      homenum:state=>state.home.homenum
    }),
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    confirm1() {
      this.checkgame = this.checkgame0;
      event.preventDefault();
    },
    confirm2() {
      this.checkarea = this.checkarea0;
      event.preventDefault();
    },
    cancel() {
      event.preventDefault();
    },
    onSubmit(values) {
      if (localStorage.userInfo) {
        let usern = JSON.parse(localStorage.userInfo).username;
        //  console.log(usern);
        let order = {
          ...values,
          username: usern,
        };
        //  console.log(postorder);
        //  console.log(values);
        postorder(order).then((res) => {
          // console.log(res);
          this.$router.push("/shoppingcar");
        });
        this.$store.commit('home/changehomenum',2)
      }
    },
    onConfirm(checkgame, index) {
      // Toast(`当前值：${checkgame}, 当前索引：${index}`);
    },
    onChange(picker, v, index) {
      // Toast(`当前值：${v}, 当前索引：${index}`);
      this.checkgame0 = v;
      this.checkarea0 = v[0] + " " + v[1];
    },
    onCancel() {
      Toast("取消");
    },
  },
  created() {
    axios.post("/dl/wap/getWapDlGameList").then((res) => {
      this.$store.commit("postOrder/getgame", res.data);
    });
    axios.post("/dl/wap/getWapDlAreaServerList?gameId=314").then((res) => {
      this.$store.commit("postOrder/getarea", res.data);
    });
  },
  mounted() {
    if (this.getgamename) {
      this.checkgame = this.getgamename.gameName;
    }
  },
  watch: {
    getgamename() {
      this.checkgame = this.getgamename.gameName;
    },
  },
};
</script>

<style src='../assets/css/postorder.css' >
</style>